<table [ngClass]="tableClasses" [style.line-height]="lineHeight">
    <thead *ngIf="!hiddenHead">
        <tr>
            <th *ngFor="let head of heads" [width]="head.width" [ngClass]="head.headClass">{{head.title}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let body of adjustedBody; trackBy: trackByKeyField">
            <ng-container *ngFor="let head of heads">
                <!-- Interpolates the data into the td if no customized templated found. -->
                <td [ngClass]="head.cellClass">
                    <ng-container *ngIf="!head.template else cellTemplate">
                        {{body[head.dataField]}}
                    </ng-container>

                    <!-- Inserts the customized templated if found. -->
                    <!-- Uses the found html inside the op-table-head via ngTemplateOutlet. -->
                    <!-- Sets the data context with current row data. It can be retrieved via opProjectedTemplate directive for customized template usage. -->
                    <ng-template #cellTemplate [ngTemplateOutlet]="head.template"
                        [ngTemplateOutletContext]="{$implicit: body}">
                    </ng-template>
                </td>
            </ng-container>
        </tr>
    </tbody>
</table>

<!-- Paginator Settings -->
<div *ngIf="needPaginator">
    <span class="pull-left" style="margin-top: 8px;">
        <!-- This is data and page summary -->
        当前为第{{currentPage}}页，共{{calculateTotalPageCount()}}页，共{{totalRowsCount}}条
    </span>

    <div class="pull-right">
        <!-- Paginator -->
    </div>
</div>